<template>
    <div>
        <van-sticky :offset-top="0">
        <van-nav-bar
                title="搜索门店"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-search
            v-model="value"
            show-action
            placeholder="输入地址关键词搜索门店"
            @search="onSearch"
        >
            <template #action>
            <div @click="search(value)">搜索</div>
            </template>
        </van-search>
        </van-sticky>
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check='false'
          finished-text="没有更多了"
          @load="onLoad"
          ref="trans"
        >
        <ul v-if="list.length">
            <li v-for="data in list" :key="data.id" >
            <van-panel :title="data.storeTitle" :desc="data.storeAddress" >
            </van-panel>
            </li>
        </ul>
        </van-list>
    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
import { NavBar, Icon, Sticky, Search, List, Panel } from 'vant'
import { mapMutations } from 'vuex'
Vue.use(NavBar).use(Icon).use(Sticky).use(Search).use(List).use(Panel)
export default {
  data () {
    return {
      value: '',
      list: [],
      finished: false,
      loading: false,
      cityName: '',
      cuttor: 1,
      totalCount: 0
    }
  },
  compuyed: {
    // ...mapState(['cityName'])
  },
  created () {
    this.hideAsides()
  },
  methods: {
    ...mapMutations(['showAsides', 'hideAsides']),
    getdata () {
      http({
        url: `/heihei/api/geo/get_store_list_by_keyword?c=h5&s=20000&t=1605319005469&v=1.0&keyword=${this.cityName}&pn=1&ps=20`
      }).then(res => {
        this.list = res.data.data.pageList
        this.totalCount = res.data.data.totalCount
      })
    },
    onClickLeft () {
      this.$router.push('/h5/pages/store-map/index')
    },
    onSearch (val) {
      if (this.list.length !== 0) {
        return
      }
      this.cityName = val
      this.getdata()
    },
    search (val) {
      if (this.list.length !== 0) {
        return
      }
      this.cityName = val
      this.getdata()
    },
    onLoad () {
      console.log(this.list.length, this.list, this.cuttor)
      if (this.list.length === 0) {
        this.loading = false
        return
      }
      if (this.list.length === this.totalCount) {
        this.finished = true
        return
      }
      this.cuttor++
      http({
        url: `/heihei/api/geo/get_store_list_by_keyword?c=h5&s=20000&t=1605319005469&v=1.0&keyword=${this.cityName}&pn=${this.cuttor}&ps=20`
      }).then(res => {
        this.list = [...this.list, ...res.data.data.pageList]
        this.loading = false
      })
    }
  }
}
</script>
